<template>
  <div class="home">
    <AboutView  :tittle="bt"  @onEvent="getMessage"/>
    <router-link to="/about">About</router-link>
    <!-- <p>vuex测试{{ $store.state.counter }}</p> -->
    <p>vuex第二种读取方式----{{ counter }}</p>
    <p>vuex条件筛选----{{ getCounter }}</p>
    <button @click="addClick">修改Vuex数据</button>
    <button @click="postTest">post数据提交</button>

  </div>
</template>

<script>
// @ is an alias to /src

import AboutView from '@/views/AboutView.vue'

import querystring from 'querystring'
import api from "../api/index"
import axios from 'axios'

//vuex快捷读取方式
import { mapState,mapGetters,mapMutations } from 'vuex'

export default {
  name: 'HomeView',
  data(){
    return{
       bt:"这是一个数据传递",
       testEntity:{
            name:"小明同学"
       }
    }
  },

  //专门来读取vuex数据的
  computed:{
 
    ...mapState(["counter"]),
    ...mapGetters(["getCounter"])
  },
  components: {
    AboutView
  },
  methods:{
    //第二种简便写法
    ...mapMutations(["mutations"]),
    addClick(){
          //vuex中mutations方法的固定的调用方式
          // this.$store.commit("mutations",10)

          //第二种简便写法,只有所需要修改的参数值
          this.mutations(10)
    },
    getMessage(data){
      console.log(data)
    },
    postTest(){
      api.getRequest("/postTest",this.testEntity)
       .then(res =>{
         console.log("传递到成功")
       })
    }
  },
  mounted(){
    this.postTest()
  }
}
</script>
